<template>
  <div
    v-if="props.showModel === '普通'"
    class="cc-form-model"
  >
    <div
      v-for="(model, index) in props.modelList"
      :key="index"
      class="cc-form-model-item"
    >
      <FormModel
        v-bind="model"
        :autofillList="autofillList"
        :displayList="displayList"
      />
    </div>
  </div>
  <div
    v-else-if="props.showModel === '标签'"
    class="cc-form-model"
  >
    <el-tabs
      tab-position="top"
      class="cc-form-model-tabs"
    >
      <el-tab-pane
        v-for="(model, index) in props.modelList"
        :key="index"
        class="cc-form-model-tab-item"
        :label="model.name"
      >
        <FormModel
          v-bind="model"
          :autofillList="autofillList"
          :displayList="displayList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
  <div
    v-else-if="props.showModel === '分割线'"
    class="cc-form-model"
  >
    <div
      v-for="(model, index) in modelList"
      :key="index"
      class="cc-form-model-item"
    >
      <div
        v-if="dividerStyle === '标签'"
        class="cc-form-model-item-divider"
      >
        <div class="text">{{model.name || ''}}</div>
        <div class="border">
          <div class="step">
            <div class="text">{{model.name || ''}}</div>
          </div>
          <div class="line"></div>
        </div>
      </div>
      <el-divider
        v-else
        :border-style="getStyle(dividerStyle)"
        :content-position="getPosition(dividerPosition)"
      >{{model.name || ''}}</el-divider>
      <FormModel
        v-bind="model"
        :autofillList="autofillList"
        :displayList="displayList"
      />
    </div>
  </div>
</template>

<script setup>
import { inject, ref, watch, onMounted } from 'vue';
import FormModel from './form-model.vue';
import tool from "@/utils/tool";
import api from "@/http/api";

const props = defineProps({
  fieldList: Array,
  showModel: String,
  modelList: Array,
  autofillList: Array,
  displayList: Array,
  dividerStyle: String,
  dividerPosition: String,
  operate: String
});

const initializing = ref(true);
const formData = inject('formData');
const autofillList = ref([]);

const style = ref({'无': 'none', '实线': 'solid', '虚线': 'dashed', '标签': 'label'});
const getStyle = (key) => {
  return style.value[key] || 'solid';
};

const position = ref({'居左': 'left', '居中': 'center', '居右': 'right'});
const getPosition = (key) => {
  return position.value[key] || 'left';
};

const init = () => {
  initializing.value = true;
  autofillList.value = tool.deepClone(props.autofillList) || [];
  autofillList.value.forEach(autofill => {
    if (!autofill.fieldList || autofill.fieldList.length === 0 || props.operate === '新增') return;
    autofill.triggerFieldValue = formData.value[autofill.triggerFieldName];
  });

  initializing.value = false
  if (props.operate === '新增') {
    autofillValue();
  }
};

const autofillValue = () => {
  if (initializing.value || !autofillList.value || autofillList.value.length === 0) return;

  autofillList.value.forEach(autofill => {
    if (!autofill.fieldList || autofill.fieldList.length === 0) return;
    if (autofill.triggerFieldName
        && formData.value[autofill.triggerFieldName]
        && formData.value[autofill.triggerFieldName] !== autofill.triggerFieldValue) {
      let url = '/codeless/data-model/' + autofill.dataModelId + '/data';
      let params = {};
      params[autofill.compareFieldName] = formData.value[autofill.triggerFieldName];
      api.post(url, params).then(res => {
        if (!res.data) return;
        autofill.fieldList.forEach(field => {
          formData.value[field.autofillFieldName] = res.data[field.sourceFieldName] || null;
          if (res.data[field.sourceFieldName + "_name"]) {
            formData.value[field.autofillFieldName + "_name"] = res.data[field.sourceFieldName + "_name"] || '';
          }
        });
      });
    }
    autofill.triggerFieldValue = formData.value[autofill.triggerFieldName];
  });
};

watch(() => props.autofillList, () => {
  init();
});

watch(() => formData.value, () => {
  autofillValue();
}, {deep: true});

onMounted(() => {
  initializing.value = true;
  init();
  autofillValue();
});
</script>

<style scoped lang="scss">
.cc-form-model-item-divider {
  .text {
    padding: 0 13px 0 10px;
    color: var(--el-color-primary);
    font-weight: bolder;
  }
  .border {
    margin: 5px 0 15px 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    .step {
      height: 8px;
      box-sizing: border-box;
      display: inline-block;
      border-radius: 0 8px;
      background: var(--el-color-primary);
      .text {
        height: 8px;
        padding: 0 13px 0 10px;
        visibility: hidden;
      }
    }
    .line {
      height: 4px;
      padding-left: 8px;
      flex-grow: 1;
      border-bottom: 4px solid var(--el-color-primary-light-7);
    }
  }
}
</style>